<!--
  这个组件用于替代标准的el-dialog，非模态、自由拖拽形式。
  只支持默认slot和部分配置项，用于快速使用。
-->
<template>
  <el-dialog
    ref="dialog"
    v-dialogDrag
    :visible="visible"
    destroy-on-close
    :width="width"
    :class="['styledElDialog iwhale-industrystyle', industryClass, leftTitle && 'leftTitle', nohorizontalpadding && 'nohorizontalpadding']"
    :modal="modal"
    :close-on-click-modal="closeOnClickModal"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :show-close="showClose"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @open="openFunc"
    @close="closeFun"
  >
    <template v-slot:title>
      <div v-if="title" :class="['closeAlarmTs', highlightTitle && 'highlighttitle']">
        <img v-if="industryClass === 'lystyle'" class="title-bg" src="@/assets/image/video_ly/cardtitle-bg.png">
        <img v-if="industryClass === 'lystyle' && leftTitle" class="title-star" src="@/assets/image/video_ly/cardheader-star.png">
        {{ title }}
        <template v-if="industryClass === 'lystyle'">
          <div v-if="industryClass === 'lystyle'" class="title-divider" />
          <div class="title-bottom" />
        </template>
      </div>
    </template>
    <template v-if="industryClass === 'lystyle'">
      <div class="title-liner" />
      <div class="lt-line cornerline" />
      <div class="rt-line cornerline" />
      <div class="lb-corner corner" />
      <div class="rb-corner corner" />
    </template>
    <slot />
  </el-dialog>
</template>

<script>
import $ from 'jquery'

export default ({
  name: 'StyledElDialog',
  props: {
    visible: Boolean,
    highlightTitle: Boolean,
    leftTitle: Boolean,
    width: String,
    title: String,
    top: Number,
    left: Number,
    nohorizontalpadding: Boolean,
    modal: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    industryClass() {
      return this.$store.getters['alarmEvent/industryClass']
    }
  },
  watch: {
    visible(v) {
      if (v) {
        // 如果设置了top/left偏移量，那么就稍微处理一下
        // 注意：因为dialog有50%的transform，所以这个top要加上当前高度的50%
        if (this.top !== undefined) {
          this.$nextTick(() => {
            const $dom = $(this.$refs.dialog.$el).find('.el-dialog')
            $dom.css({ top: this.top + ($dom.height() / 2) })
          })
        }

        if (this.left !== undefined) {
          this.$nextTick(() => {
            const $dom = $(this.$refs.dialog.$el).find('.el-dialog')
            $dom.css({ left: this.left + ($dom.width() / 2) })
          })
        }
      }
    }
  },
  methods: {
    // 协助派发外部事件
    openFunc() {
      this.$emit('open')
    },
    closeFun() {
      this.$emit('close')
    }
  }
})
</script>

<style lang="scss">
.styledElDialog.iwhale-industrystyle {
  .el-loading-spinner{
    i {
      color: #00a9ff;
    }
    .el-loading-text {
      color: #00a9ff;
    }
  }
  &.nohorizontalpadding {
    .el-dialog {
      .el-dialog__body {
        padding: 12px 0;
      }
    }
  }
  &.gtstyle {
    .el-dialog {
      border: 1px solid #6e674e;
      background: linear-gradient(180deg, rgba(163, 144, 69, .48), rgba(105, 95, 42, .16) 35px, rgba(98, 88, 38, 0) 100px) rgba(0, 0, 0, .81);
      .el-dialog__header {
        background: none;
      }
      .el-dialog__headerbtn {
        top: -10px;
        right: -10px;
        .el-dialog__close {
          background: url("~@/assets/image/common/gt/icon-cancel.png");
          background-size: 20px 20px;
          height: 20px;
          width: 20px;
        }
      }
      .closeAlarmTs{
        &.highlighttitle {
          border-bottom: 1px solid;
          border-image: linear-gradient(90deg, rgba(228, 231, 193, 0), rgba(228, 231, 193, 1), rgba(228, 231, 193, 0)) 1 1;
          background: url("~@/assets/image/singleTabSel.png") no-repeat 50% 100%/89px 16px;
        }
      }
    }
  }
  &.lystyle {
    &.leftTitle {
      .el-dialog {
        .closeAlarmTs.highlighttitle {
          justify-content: normal;
        }
        .title-liner {
          left: 36px;
        }
        .title-bottom,
        .title-bg {
          left: 0;
        }
      }
    }
    .el-dialog {
      border-radius: 0;
      background: linear-gradient(180deg,rgba(0,19,30,.7),#00131e);

      .el-dialog__header {
        border-bottom: none;
        background: linear-gradient(91deg, rgba(2,137,109,0.2) 0%, rgba(2,137,109,0.15) 23%, rgba(2,137,109,0) 100%);
        .texttitle {
          font-weight: 600;
          text-shadow: 0px 0px 18px rgba(0,245,193,0.9);
        }
      }
      .el-dialog__headerbtn {
        z-index: 1;
        top: -14px;
        right: -14px;
        .el-dialog__close {
          background: url("~@/assets/image/ar_ly/icon-cancel.png");
          background-size: 28px 28px;
          height: 28px;
          width: 28px;
        }
      }

      .title-bg {
        position: absolute;
        left: calc(50% - 66px);
        top: 0;
        width: 242px;
        height: 48px;
        pointer-events: none;
      }
      .title-star {
        width: 8px;
        height: 8px;
        margin-left: 12px;
        margin-right: 6px;
      }
      .title-liner {
        position: absolute;
        top: -7px;
        left: calc(50% - 18px);
        width: 36px;
        height: 14px;
        pointer-events: none;
        background-image: url('~@/assets/image/video_ly/card-liner1.png');
        background-size: 100% 100%;
      }
      .title-bottom {
        position: absolute;
        left: calc(50% - 55px);
        bottom: 0;
        width: 120px;
        height: 10px;
        background-image: url('~@/assets/image/video_ly/selected-bottom.png');
        background-size: 100% 100%;
      }
      .title-divider {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 50%, hsla(0, 0%, 100%, 0));
      }
      .cornerline{
        position: absolute;
        top: -1px;
        width: 8px;
        height: 1px;
        background: #FFFFFF;
        box-shadow: 0 0 6px 0 #02896D, inset 0 0 2px 0 #00FFF8;
        &.lt-line{
          left: 0;
        }
        &.rt-line{
          right: 0;
        }
      }
      .corner{
        width: 21px;
        height: 25px;
        position: absolute;
        bottom: -1px;
        background-size: 100% 100%;
        &.lb-corner{
          left: -1px;
          background-image: url('~@/assets/image/ar/lb_corner.png');
        }
        &.rb-corner{
          right: -1px;
          background-image: url('~@/assets/image/ar/rb_corner.png');
        }
      }

      .closeAlarmTs{
        &.highlighttitle {
          border-radius: 0px;
          background: linear-gradient(91deg, rgba(2,137,109,0.2) 0%, rgba(2,137,109,0.15) 23%, rgba(2,137,109,0) 100%);
          font-weight: 600;
          text-shadow: 0px 0px 18px rgba(0,245,193,0.9);
        }
      }
    }
  }
  .el-dialog {
    border-radius: 8px;
    background: rgba(23,37,55,0.9);
    .el-dialog__header {
      position: relative;
    }
    .el-dialog__headerbtn {
      top: -10px;
      right: -8px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      background: url("~@/assets/image/ar/close.png");
      background-size: contain;
      height: 18px;
      width: 18px;
      font-size: 18px;
      color: #c5d9f7;
      position: relative;
      cursor: pointer;
    }

    .el-dialog__headerbtn .el-dialog__close::before {
      background: none !important;
      content: ' ';
    }

    .el-dialog__body {
      padding: 12px;
      border-radius: 0 0 8px 8px;
      background: transparent !important;
    }
  }
  .el-dialog>.el-dialog__header {
    padding: 0;
    border-radius: 8px 8px 0 0;
    border: none;
  }

  .closeAlarmTs{
    border-radius: 8px 8px 0 0;
    height: 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--iw-text-color);
    line-height: 16px;
    margin-top: 18px;

    &.highlighttitle {
      margin-top: 0;
      line-height: 24px;
      height: 48px;
      text-align: left;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      color: var(--iw-text-color);
      justify-content: center;
      background: linear-gradient(180deg, rgba(132,180,250,0.7) 0%, rgba(132,180,250,0.245) 100%);
      position: relative;
    }
  }

  &.el-dialog__wrapper {
    pointer-events:none;
    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
    .el-dialog {
      pointer-events:auto;
    }
  }

    // 用于表单样式覆盖
    .vue-treeselect__control {
      background-color: rgba(130,181,255,0.2);
    }

    .el-dialog__body .el-form-item__label  {
      font-weight: 400;
    }
}
</style>
